<template>
    <el-date-picker
        v-model.trim="value"
        type="date"
        align="right"
        :picker-options="pickerOptions"
        :placeholder="placeholder"
        @change="change"
        format="yyyy-MM-dd"
        value-format="yyyy-MM-dd"
    >
    </el-date-picker>
</template>
<script>
import { ref } from 'vue';

export default {
    name: 'SearchDatePicker',
    setup() {
        const value = ref('');
        const pickerOptions = {
            disabledDate(time) {
                return time.getTime() > Date.now();
            },
            shortcuts: [
                {
                    text: '今天',
                    onClick(picker) {
                        picker.$emit('pick', new Date());
                    },
                },
                {
                    text: '昨天',
                    onClick(picker) {
                        const date = new Date();
                        date.setTime(date.getTime() - 3600 * 1000 * 24);
                        picker.$emit('pick', date);
                    },
                },
                {
                    text: '一周前',
                    onClick(picker) {
                        const date = new Date();
                        date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', date);
                    },
                },
            ],
        };
        return { pickerOptions, value };
    },
    props: {
        placeholder: {
            required: false,
            default: '',
        },
        change: {
            type: Function,
        },
    },
};
</script>
